<template>
  <div ref="chartEl" :style="stylesConfig" v-resize="resizeHandler" class="compo-public-style"></div>
</template>

<script setup>
import {
  // onMounted,
  // ref,
  computed
  // watch,
  // toRefs,
  // toRef,
  // onBeforeUnmount
} from 'vue';

import { useChartComponentData } from '@/hooks/use-chart-component-data';

const props = defineProps({
  value: {
    type: Object,
    default: () => { }
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${styles.value.rightTop / 100
      }rem ${styles.value.rightBottom / 100}rem ${styles.value.leftBottom / 100
      }rem`
  };
});

const mockData = {
  legend: {
    show: true //是否展示图例
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name: '销售数量',
      data: [290, 200, 244, 38, 55, 107, 380],
      type: 'line'
    }
  ]
};
//图形类型配置
const chartTypeConfig = {
  type: 'line'
};
const { styles, preview, chartEl, resizeHandler } = useChartComponentData(
  props,
  mockData,
  chartTypeConfig
);
</script>
<style scoped lang="scss"></style>
